region = {
	core : new PointSet(),
	border: new PointSet(),
	count: 0,
	rgbSum: [0,0,0],
	allAddedDiffs: new Array(),
	grow: function(point, rgb){
		this.count++
		this.core.add(point)
		this.border.remove(point)
		poiBord = pointBorder(point)

		t=this
		poiBord.foreach(function(pb){
			if( !t.core.contains(pb) ){
				t.border.add(pb)
			}
		});
		this.rgbSum = rgbAdd(this.rgbSum, rgb)
	},
	addedDiffTrend: function(splitBy){
		ret = new Array()
		sum=0
		for( i=0; i<this.allAddedDiffs.length; i++ ){
			if( i%splitBy == 0 ){
				ret.push( sum / splitBy )
				sum = 0
			}
			sum += this.allAddedDiffs[i]
		}
		return ret
	},
	avgColor: function(){
		return rgbDiv(this.rgbSum, this.count)
	},
	minDiffGrow: function(rgbFun){
		avg = this.avgColor()
		minDiff = 100000
		this.border.foreach(function(p){
			d = colorDiff(rgbFun(p),avg)
			if( minDiff>d ){
				minDiff=d
			}
		})
		//alert("minDiff="+minDiff)
		t=this
		growPoints = new PointSet()
		this.border.foreach(function(p){
			d = colorDiff(rgbFun(p),avg)
			if( Math.abs(d-minDiff)<1 ){
				growPoints.add(p)
				t.allAddedDiffs.push(d)
			}
		})
		growPoints.foreach(function(p){
			t.grow(p,rgbFun(p))
		})
		return {growPoints:growPoints, minDiff:minDiff}
	}
}


function canv2(){
  var myCanvas=document.createElement("canvas");
  var myCanvasContext=myCanvas.getContext("2d");

  image = document.getElementById('i1');
  var imgWidth=image.width;
  var imgHeight=image.height;
  // You'll get some string error if you fail to specify the dimensions
  myCanvas.width= imgWidth;
  myCanvas.height=imgHeight;
  //  alert(imgWidth);
  myCanvasContext.drawImage(image,0,0,10,10);

  imageData = safeImageData(myCanvasContext,0,0,10,10)
  alert(imageData)
}

function paintRect(context,currX){
	context.fillStyle = "#FF0000"
	context.fillRect(currX, 10, 1,1)
	if( currX<200 ){
		setTimeout(function(){ paintRect(context, currX+1) }, 20)
	} 
}

function doGrowWork(context,imageData){
	context.fillStyle = "#FFFFFF"
	rgbFun = function(p){
		return getRgb(imageData, p[0], p[1])
	}
	//alert("region.count="+region.count)
	if( region.count==0 ){
		p=[180,60]
		region.grow(p,rgbFun(p))		
		//context.fillRect(p[0], p[1], 1,1)
	}else{
		growRes = region.minDiffGrow(rgbFun)
		//ps.foreach(function(p){
		//	context.fillRect(p[0], p[1], 1,1)
		//})
		log = document.getElementById('logArea')
		log.value = 
			"count "+region.count+
			" diff="+growRes.minDiff+"\n"+log.value
	}

	context.fillStyle = rgbToCss(region.avgColor())
	region.core.foreach(function(p){
		context.fillRect(p[0], p[1], 1,1)
	})
	
	context.fillStyle = "#0000FF"
	region.border.foreach(function(p){
		context.fillRect(p[0], p[1], 1,1)
	})
}	

function doGrow(context,imageData){
	if( !document.getElementById('pauseFlag').checked ){
  		doGrowWork(context,imageData)
	}
	setTimeout( 
		function(){ doGrow(context,imageData) }, 200)
}

function startPaintReg(){
	var drawingCanvas = document.getElementById('myDrawing');
	if(drawingCanvas.getContext) {
	    var context = drawingCanvas.getContext('2d');

	    var myImage = new Image();
	    myImage.onload = function() {
			context.drawImage(myImage, 0, 0, 233, 217);
			imageData = safeImageData(context,0, 0, 233, 217)
			//context.putImageData(imageData,0,0)
			doGrow(context,imageData)
		       // paintRect(context,0)
	    }
	    myImage.src = "3apples.jpeg";
	}
}
function diffTrend(){
 	log = document.getElementById('logArea')
	log.value = region.addedDiffTrend(100).join('\n')
			+"\n"+log.value
}

function canv(){
	var drawingCanvas = document.getElementById('myDrawing');
	if(drawingCanvas.getContext) {
	    var context = drawingCanvas.getContext('2d');

		// Create the yellow face
		context.strokeStyle = "#000000";
		context.fillStyle = "#FFFF00";
		context.beginPath();
		context.arc(100,100,50,0,Math.PI*2,true);
		context.closePath();
		context.stroke();
		context.fill();

		var myImage = new Image();
		myImage.onload = function() {
			//context.drawImage(myImage, 30, 15, 130, 110);

			imageData = safeImageData(context,0, 0, 200, 200)
			alert(imageData.width +' '+ imageData.height +' '+ imageData.data.length)
			arr = imageData.data
			for( x=0; x<150; x++ ){
				setRgb(imageData,x,100,[255,0,0])
			}
			context.putImageData(imageData,0,0)
			return

			for( r=0; r<100; r++ ){
				for( c=0; c<imageData.width; c++ ){
					rgb = getRgb(imageData,c,r)
					setRgb(imageData, c,r+50, rgb)
					//idx = (r*imageData.width+c)*4
					//str = arr[ idx ] + " "+arr[ idx+1 ]+ " "+arr[ idx+2 ]+ " "+arr[ idx+3 ]
					//document.getElementById('bytes').value += str + '\n'
				}
			}
		}
		myImage.src = "3apples.jpeg";


	}
}
